<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
<script src="../res/layui/layui.js"></script>

</head>
<style type="text/css">
.layui-table td div {
	height: 80px;
}

.layui-table td div img {
	height: 80px;
}
</style>

<body>


 <form class="layui-form" action="" style="margin-top: 20px;"> 
		<div class="layui-form-item">

			<div class="layui-inline">
				<label class="layui-form-label">订单编号</label>
				<div class="layui-input-inline" style="width: 200px;">
					<input id="ordernumber" type="text" name="orderid" placeholder=""
						autocomplete="off" class="layui-input">
				</div>

				<div class="layui-inline">
					<button id="formDemo" class="layui-btn" lay-submit
						lay-filter="formDemo">搜索</button>
					<button id="add" class="layui-btn" lay-submit lay-filter="add">添加</button>
					<button id="batchDel" class="layui-btn layui-btn-danger"
						lay-submit lay-filter="batchDel">批量发货</button>

				</div>

			</div>
	</form>
	<table id="demo" lay-filter="test"></table>

	<script type="text/html" id="barDemo">
			
			<a class="layui-btn layui-btn-mini" lay-event="edit">查看</a>
			

			<!-- 这里同样支持 laytpl 语法，如： -->
			{{# if(d.auth > 2){ }}
			<a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
			{{# } }}
		</script>

	<script>
		var index;
		layui.use([ 'table', 'layer', 'laydate', 'form' ], function() {
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;

			var $ = layui.$;
			//执行渲染
			table.render({
				id : "idTest",

				elem : '#demo' //指定原始表格元素选择器（推荐id选择器）
				,
				height : 1000 //容器高度
				,
				page : true,
				url : "/g4/order/selectlist",
				where : {
					orderstatus:2
				},
				cols : [ [ //标题栏
				{
					checkbox : true
				}, /* {
					field : 'orderid',
					title : 'ID',
					width : 80
				}, */ {
					field : 'ordernumber',
					title : '订单编号',
					width : 120
				}, {
					field : 'userrealname',
					title : '用户名',
					width : 120
				}, {
					field : 'orderstate',
					title : '订单状态',
					width : 120
				}, /* {
					field : 'isdelete',
					title : '是否删除',
					width : 120
				}, */{
					field : 'creattime',
					title : '下单时间',
					width : 180
				}, {
					field : 'updatetime',
					title : '订单完成时间',
					width : 180
				}, {
					fixed : 'right',
					width : 120,
					align : 'center',
					toolbar : '#barDemo'
				} ] ]

			});

			//监听搜索
			form.on('submit(formDemo)', function(data) {
				table.reload('idTest', {
					where : { //设定异步数据接口的额外参数，任意设
						ordernumber : $("#ordernumber").val()
					
					//…
					}
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			//监听添加的提交按钮
			form.on('submit(add_submit)', function(data) {
				var url = "/g4/order/ids";
				var dt = $("#form_add").serialize();
				$.post(url, dt, function(res) {
					if (res.code == '0') {
						layer.msg('添加成功');
						layer.close(index);
						$("#formDemo").click();
					} else {
						layer.msg('添加失败');
					}
				}, 'json')
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			//监听添加
			form.on('submit(add)', function(data) {
				index = layer.open({
					area : [ '800px', '500px' ],
					type : 1,
					content : $('#form_add')
				//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			
			//监听批量删除
			form.on('submit(batchDel)', function(data) {
				layer.confirm('确认发货？', function(index) {
						var url = "/g4/order/ids?orderstate=3";
						var checkStatus=table.checkStatus('idTest');
						var list=checkStatus.data;
						
						var ids="";
						for(var i=0;i<list.length;i++){
							ids+=list[i].orderid;
							if(i<list.length-1){
								ids+=","
							}
						}
						
						var dt = {
							ids : ids
						}
						$.post(url, dt, function(res) {
							if (res.code == '0') {
								layer.msg('发货成功');
								
								$("#formDemo").click();
							} else {
								layer.msg('发货失败');
							}
						}, 'json')
						layer.close(index);
						//向服务端发送删除指令
					});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			

			//监听删除
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值

				if (layEvent === 'detail') { //查看
					//do somehing
					
				} else if (layEvent === 'del') { //删除

					layer.confirm('真的删除行么', function(index) {
						var url = "/ceshi/Product?method=delectid";
						var dt = {
							id : data.pid
						}
						$.post(url, dt, function(res) {
							if (res.code == '0') {
								layer.msg('刪除成功');
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							} else {
								layer.msg('刪除失败');
							}
						}, 'json')
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if (layEvent === 'edit') { //编辑
					layui.sessionData("ids",{key:"orderid",value:data.orderid}) 

					layer.open({
						type : 2,
						area : [ '1000px', '500px' ],
						content : 'dingdan2.html'
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

					});
				}
			});

		});
	</script>

</body>

</html>